<template>
  <div class="InfiniteScroll">
    <div 
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        :infinite-scroll-distance=distance>
        <slot name="item"></slot>
        <div style="text-align: center;padding: 5px;font-size: 14px" v-if="page.pageNum>=totalPage?false:true">数据加载中....</div>
        <div style="text-align: center;padding: 5px;font-size: 14px" v-if="listScroll.length==0 && !loading">暂无数据....</div>
    </div>
  </div>
</template>

<script>
import { InfiniteScroll } from 'mint-ui';
// import { InfiniteScroll } from 'mint-ui/lib/infinite-scroll'
import Vue from "vue";
Vue.use(InfiniteScroll);
export default {
  name: "InfiniteScroll",
  data(){
    return{
      loading:false,
      dataTotal:0, // 总数
      totalPage:1, // 计算一共有几页
      indexKey:'pageNum',sizeKey:'pageSize',dataKey:'records',
      page:{pageSize:10,pageNum:1},
      dataUrl:'',//接口地址或者接口方法
      callBack:false, listScroll:[]//数据
    }
  },
  props: {
    search:{type:Object,default:function (){ return{}}},
    conf:{type:Object,default:function (){return{}}},
    distance:{type:Number,default:function (){return 10}}, // 触发加载方法的滚动距离阈值（像素）
  },
  mounted() {
    ['dataKey','dataUrl','indexKey','sizeKey','callBack','pageSize'].forEach(key=>{
      if(typeof(this.conf[key]) !="undefined"){
        this[key] = this.conf[key];
        if(key == 'pageSize')this.page.pageSize=this.conf[key];
      }
    })
    this.pageData();
  },
  methods:{
    loadMore(){
      if(this.page.pageNum < this.totalPage && this.page.pageNum>0){
        this.page.pageNum = this.page.pageNum+1;
        this.pageData();
      }
    },
    // 父级调用数据查询接口  第一页
     searchData(res){
      if(res)this.search=res;
      this.listScroll = []
      this.page.pageNum=1;
      this.pageData();
    },
        /**
     * 数据执行
     * **/
     pageData(){
      this.loading = true
      let data={};
      for(let key in this.search){
        if(this.search[key] && this.search[key] !=''){
          data[key] = this.search[key];
        }
      }
      data[this.sizeKey] = this.page.pageSize;
      data[this.indexKey] = this.page.pageNum;
      if(typeof (this.dataUrl) =='function'){
        this.dataUrl(data).then(res=>{ 
          if(res.data){
            if(res.data instanceof Array){
            }else{
              let d =res.data;
              for(let k in d){
                res[k] = d[k];
              }
              delete res.data;
            }
          }
          this.resultFun(res);
        }).catch(r=>{
          this.resultFun(r);
        })
        return
      }
    },
    /**
     * 返回数据解析
     * **/
    resultFun(res){
      if(res.code !='0000'  ){
        console.log(res);
        this.$message.error(res.msg || '接口出错，请刷新页面');
      }
      this.dataTotal = res.total || 0;
      this.totalPage=Math.ceil(res.total/this.page.pageSize);
      let list=res[this.dataKey] || [];
      let listScroll = this.listScroll
      list = [...listScroll,...list]
      this.listScroll = list
      this.loading = false
      this.$emit('change','page_loader_over',list);
    },
  }

}
</script>

<style scoped>
</style>
